<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="navbar" :style="{
			paddingTop:distanceToTop+'px',
			backgroundColor:backgroundColor,
			paddingBottom:navbarBottom+'px',
			}">
		<view class="navbar-content u-flex" :style="{
			height:navbarHeight+'px',
			}">
			<view class="left">
				<slot name="left" v-if="isLeft">
					<view class="icon u-flex">
						<u-icon name="arrow-left" color="#888888" size="22" @click="$toBack()"
							v-if="lastPages"></u-icon>
						<image :src="$getImageUrl('/user_client/static/icons/home.svg')" class="left-img" @click="$switchTab('/pages/index/index')"
							v-else></image>
					</view>
				</slot>
			</view>
			<view class="center u-flex-center">
				<slot name="center">
					<view class="center-content">
						<view class="title">
							{{title}}
						</view>
					</view>
				</slot>
			</view>
		</view>
		<slot name="bottom">
			<view class="bottom">
			</view>
		</slot>
	</view>
	<!-- #endif -->
	<!-- #ifdef APP-PLUS || H5 -->
	<view class="navbar">
		<view class="navbar-content u-flex">
			<view class="left">
				<slot name="left" v-if="isLeft">
					<view class="icon u-flex">
						<u-icon name="arrow-left" color="#888888" size="22" @click="$toBack()"
							v-if="lastPages"></u-icon>
						<image :src="$getImageUrl('/user_client/static/icons/home.svg')" class="left-img" @click="$switchTab('/pages/index/index')"
							v-else></image>
					</view>
				</slot>
			</view>
			<view class="center u-flex-center">
				<slot name="center">
					<view class="center-content">
						<view class="title">
							{{title}}
						</view>
					</view>
				</slot>
			</view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				distanceToTop: 0,
				statusBarHeight: 0,
				navbarHeight: 0,
				lastPages: true,
			}
		},
		props: {
			isLeft: {
				type: Boolean, // 接收的参数类型
				default: true, //默认值
			},
			title: {
				type: String, // 接收的参数类型
				default: '', //默认值
			},
			backgroundColor: {
				type: String,
				default: '#FFFFFF'
			},
			navbarBottom: {
				type: Number,
				default: 10
			},
		},
		mounted() {
			// #ifdef MP-WEIXIN
			const pages = getCurrentPages();
			const lastPages = pages.length;
			if (lastPages > 1) {
				// 存在上一页
				this.lastPages = true
			} else {
				// 不存在上一页
				this.lastPages = false
			}
			this.getMenuButtonPosition()
			// #endif 
		},
		methods: {
			getMenuButtonPosition() {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				const systemInfo = uni.getSystemInfoSync()
				this.distanceToTop = menuButtonInfo.top
				this.statusBarHeight = systemInfo.statusBarHeight
				this.navbarHeight = menuButtonInfo.height
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9999;
		// #ifdef APP-PLUS || H5
		padding-top: var(--status-bar-height);
		background-color: #fff;
		// #endif

		.navbar-content {
			// #ifdef APP-PLUS || H5
			height: 40px;
			// #endif
			position: relative;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 28rpx;

				.left-img {
					width: 40rpx;
					height: 35rpx;
				}
			}

			.center {
				width: 750rpx;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto 0;
				z-index: -1;
				text-align: center;
				line-height: 1;

				.center-content {
					width: 388rpx;
				}

				.title {
					font-size: 30rpx;
				}
			}
		}

		.bottom {
			width: 100%;
		}
	}
</style>